<!--
 * @Author: Wushiqi
 * @Descripttion: 修改密码表单
 * @Date: 2020-09-01 09:34:14
 * @LastEditor: Wushiqi
 * @LastEditTime: 2020-10-10 13:42:50
-->
<template>
  <div>
    <el-form ref="changePwdForm" :model="changePwdForm" :rules="formRules" class="change-pwd-form">
      <el-form-item prop="oldPwd">
        <span class="password-span">原密码：</span>
        <el-input v-model="changePwdForm.oldPwd" show-password class="password-input" />
      </el-form-item>
      <el-form-item prop="newPwd">
        <span class="password-span">新密码：</span>
        <el-input v-model="changePwdForm.newPwd" show-password class="password-input" />
      </el-form-item>
      <el-form-item prop="confirmPwd">
        <span class="password-span">确认密码：</span>
        <el-input v-model="changePwdForm.confirmPwd" show-password class="password-input" />
      </el-form-item>
      <el-form-item class="password-form-item">
        <el-button class="password-button" @click="pwdChangeSave">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import API from '@/utils/api/user/profile'
import { encrypt } from '@/utils/aes'
export default {
  data() {
    const confirmPwdValid = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('*请输入确认密码'))
      } else if (value !== this.changePwdForm.newPwd) {
        callback(new Error('*两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      changePwdForm: {
        oldPwd: '',
        newPwd: '',
        confirmPwd: ''
      },
      formRules: {
        oldPwd: [{ required: true, message: '*请输入原密码' }],
        newPwd: [{ required: true, message: '*请输入新密码' }, { min: 6, message: '*密码不能少于6位' }],
        confirmPwd: [{ required: true, validator: confirmPwdValid, trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 修改密码
    pwdChangeSave: function() {
      const form = this.changePwdForm
      this.$refs.changePwdForm.validate((valid) => {
        if (valid) {
          const params = {
            oldPassword: encrypt(form.oldPwd),
            newPassword: encrypt(form.newPwd),
            _csrf: sessionStorage._csrf
          }
          API.changePwdAPI(params).then(response => {
            const res = response.data.data
            if (response.data.flag === 'success') {
              this.$alert('修改密码成功，请重新登录', '提示', {
                confirmButtonText: '确定',
                type: 'success',
                callback: action => {
                  sessionStorage.clear()
                  location.reload()
                  this.$router.replace(`/login?redirect=${this.$route.fullPath}`)
                }
              })
            } else {
              this.$errorMsg(res)
            }
          }).catch(error => { this.$errorMsg('' + error) })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.password-span {
  display: inline-block;
  width: 90px;
  margin-left: 20px;
}
.password-input {
  width: 200px;
}
.password-form-item {
  width: 100%;
  text-align: right;
}
</style>
<style lang="scss">
.change-pwd-form {
  .el-form-item__error {
    margin-left: 115px;
  }
}
</style>
